// 入口文件
import Vue from 'vue'
// 配置vuex的步骤
// 1. 运行 cnpm i vuex -S 
// 2. 导入包
import Vuex from 'vuex'
// 3. 注册vuex到vue中
Vue.use(Vuex)
// 4. new Vuex.Store() 实例，得到一个 数据仓储对象
var store = new Vuex.Store({
  state: {   //可以理解为vm实例中的data
      count:1
  },
  mutations: {  //可以理解为vm实例中的methods
    // 定义的自增的方法
    increment(state){
      state.count++
    },
    // 定义自减的方法
    substrac(state){
      state.count--
    }
  },
  getters: {   //可以理解为vm实例中的watch
      optCount:function(state){
          return '当前返回的count值:'+state.count
      }
  }
})

import App from './App.vue'

const vm = new Vue({
  el: '#app',
  render: c => c(App),
  store // 5. 将 vuex 创建的 store 挂载到 VM 实例上， 只要挂载到了 vm 上，任何组件都能使用 store 来存取数据
})


//总结：
// 1.state中的数据不能随便进行更改，如果需要修改数据，则需要通过mutations
// 2.如果组件想之间从state中获取数据，写法：$store.state.xxx
// 3.如果组件想要修改数据，必须通过mutations提供的方法：this.$store.commit('方法名')
// 4.如果想要对外界暴露数据，则需要进行一层包装，也就是getters中的方法。具体使用：
// this.$store.getters.xxx     